<template>
	<view class="tripDetail">
		<view class='map' >
			<map style='width:100%;height:100%' 
				:markers="markers" 
				:longitude="lng" 
				:latitude="lat"
				:polyline='polyline'
				:enable-zoom='true'
				:enable-scroll='true'
				:enable-rotate='true'
				:show-location='true'>
			</map>
		</view>
		
		<view class="orderOne">
			<view class='product dFlex jBetween_aCenter'>
				<text>{{transport.name}}</text>
				<view class="orderStatus imgPublic">
					<image v-if='transport.status == "1"' src="../static/images/bjz.png" mode="widthFix"></image>
					<image v-if='transport.status == "2"' src="../static/images/ybj.png" mode="widthFix"></image>
					<image v-if='transport.status == "3" && identify == "2"' src="../static/images/dzf.png" mode="widthFix"></image>
					<image v-if='transport.status == "3" && identify == "1"' src="../static/images/ysz.png" mode="widthFix"></image>
					<image v-if='transport.status == "4" && identify == "1"' src="../static/images/ywc.png" mode="widthFix"></image>
					<image v-if='transport.status == "4" && identify == "2"' src="../static/images/ysz.png" mode="widthFix"></image>
					<image v-if='transport.status == "5" && identify == "1"' src="../static/images/yqx.png" mode="widthFix"></image>
					<image v-if='transport.status == "5" && identify == "2"' src="../static/images/ywc.png" mode="widthFix"></image>
				</view>
				<!-- orange blue-->
				<view :class="['carType','dFlex','jCenter_aCenter','orange']">{{transport.car_type?transport.car_type:'-'}}</view>
			</view>
			<view class="config">
				<view class="time dFlex jStart_aCenter">
					<u-icon name="clock-fill" color='#999999'></u-icon>
					<view class="showTime">{{transport.load_time}}-{{transport.unload_time}}</view>
				</view>
				<view class="address dFlex jStart_aCenter qi">
					<view class="addIcon blue">起</view>
					<view class="addInfo">{{transport.load_province1}}_{{transport.load_city1}}_{{transport.load_area1}}</view>
				</view>
				<view class="address dFlex jStart_aCenter">
					<view class="addIcon orange">终</view>
					<view class="addInfo">{{transport.unload_province1}}_{{transport.unload_city1}}_{{transport.unload_area1}}</view>
				</view>
			</view>
			<view class="info">
				<!-- <view class="line1 dFlex jBetween_aCenter">
					<text>行程编号</text>
					<view class="val">10.00吨</view>
				</view> -->
				<view class="line1 dFlex jBetween_aCenter">
					<text>货物重量</text>
					<view class="val">{{transport.ton}}吨</view>
				</view>
				<view class="line1 dFlex jBetween_aCenter">
					<text>货主报价</text>
					<view class="val">{{transport.ton_price}}/吨</view>
				</view>
				<view class="line1 dFlex jBetween_aCenter">
					<text>承运情况</text>
					<view class="val">{{transport.chengyun}}</view>
				</view>
				<view class="line1 dFlex jBetween_aCenter">
					<text>货车类型</text>
					<view class="val">{{transport.car_type?transport.car_type:'-'}}</view>
				</view>
				<view class="line1 dFlex jBetween_aCenter">
					<text>接货地</text>
					<view class="val" style="width: 80%;">{{transport.load_province1+transport.load_city1+transport.load_area1+transport.load_address1}}</view>
				</view>
				<view class="line1 dFlex jBetween_aCenter">
					<text>目的地</text>
					<view class="val" style="width: 80%;">{{transport.unload_province1+transport.unload_city1+transport.unload_area1+transport.unload_address1}}</view>
				</view>
				<view class="line1 dFlex jBetween_aCenter">
					<text>行程备注</text>
					<view class="val">{{transport.remark}}</view>
				</view>
			</view>
		</view>
		<!-- 货主 -->
		<view class="huozhu" v-if='identify == "2"'>
			<view class="hzInfo dFlex jStart_aCenter">
				<view class="hzTx imgPublic">
					<image :src="transport.member.image_head" mode="widthFix"></image>
				</view>
				<view class="info">
					<view class="user"> <text>{{transport.member.nickName}}</text> <text class="line"></text> </view>
					<view class="time">{{transport.member.time1}}用户 · {{transport.member.time2}}活跃</view>
				</view>
			</view>
			<view class="tips">
				<view class="tit">温馨提示</view>
				<view class="tips_content">
					该发布人承诺：发布的信息真实有效，报价成功后不会改变行程，若有不实请点击举报。如有疑问或需求欢迎联系客服。
				</view>
			</view>
		</view>
		<!-- 报价情况 -->
		<view class="bj">
			<view class="bjTit">报价情况</view>
			<view class="info">
				<view class="line1 dFlex jBetween_aCenter">
					<text>报价人数</text>
					<view class="val">{{transport.ship_offer?transport.ship_offer:'0'}}人报价</view>
				</view>
				<view class="line1 dFlex jBetween_aCenter">
					<text>最低报价</text>
					<view class="val">{{transport.min_price?transport.min_price:'0.00'}}/吨</view>
				</view>
				<view class="line1 dFlex jBetween_aCenter">
					<text>货主报价</text>
					<view class="val" >{{transport.ton_price?transport.ton_price:'0.00'}}/吨</view>
				</view>
			</view>
		</view>
		<!-- 车主 -->
		<view class="btns dFlex jAround_aCenter" v-if='identify == "2"' :style="{
			'padding-bottom':isIos ? 'env(safe-area-inset-bottom)' : '12px'
		}">
			<!-- 报价中 -->
			<view class="btn len1 sty1" v-if='transport.status == "1"' @click="goOffer()">立即出价</view>
			<!-- 待支付 -->
			<view class="btn len2 sty2" v-if='transport.status == "2" || transport.status == "3"' @click='cancelOrder'>取消订单</view>
			<view class="btn len2 sty1" v-if='transport.status == "3"' @click='payOffer'>支付信息费</view>
			<!-- <view class="btn len2 sty1">修改出价</view> -->
		</view>
		<!-- 货主 -->
		<view class="btns dFlex jAround_aCenter" v-if='identify == "1"' :style="{
			'padding-bottom':isIos ? 'env(safe-area-inset-bottom)' : '12px'
		}">
			<!-- 报价中 -->
			<view class="btn len2 sty2" v-if='transport.status < 4' @click.stop="cancelOrder()">取消订单</view>
			<view class="btn len2 sty1" v-if='transport.status == "1"' @click.stop='republish()'>重新发布</view>
			<view class="btn len2 sty1" v-if='transport.status == "1"' @click.stop='lookRecord()'>报价记录</view>
			<view class="btn len2 sty1" v-if='transport.status == "3"' @click.stop='contact()'>联系车主</view>
			<view class="btn len2 sty1" v-if='transport.status == "3"' @click.stop='confirm()'>确认送达</view>
		</view>
		<!-- 车主 -->
		<view class="btns dFlex jAround_aCenter" v-if='identify == "2"' :style="{
			'padding-bottom':isIos ? 'env(safe-area-inset-bottom)' : '12px'
		}">
			<view class="btn len2 sty2" v-if='transport.status == "2"' @click.stop="cancelOrder()">取消报价</view>
			<view class="btn len2 sty1" v-if='transport.status == "4"' @click.stop='contact()'>联系货主</view>
		</view>
	</view>
</template>

<script>
	import {
		offerList,
		shipInfo,
		indexOperate,
		offerPay,
		canseloffer
	} from '@/tool/http.js';
	export default {
		data() {
			return {
				identify:'',
				isIos:getApp().globalData.isIos,
				id:'',
				transport:{
					id:'',
					chengyun:'',
					ton:'',
					ton_price:'',
					car_type:'',
					load_province1:'',
					load_city1:"",
					load_area1:'',
					load_address1:'',
					lng1:'',
					lat1:'',
					lng:'',
					lat:'',
					remark:"",
					unload_province1:'',
					unload_city1:"",
					unload_area1:'',
					unload_address1:'',
					load_time:'',
					unload_time:'',
					lng4:'',
					lat4:'',
					status:'',
					tel:'',
					name:'',
					ship_offer:'',
					min_price:"",
					ton_price:'',
					member:{},
					my_ship_offer:{},
				},
				lng:'',
				lat:'',
				markers:[],
				polyline:[],
			};
		},
		onLoad(e) {
			this.identify = uni.getStorageSync('use_identify');
			this.transport.id = e.id?e.id:'';
			if(e.id){
				this.getInfo()
			}
		},
		onUnload() {
			uni.offLocationChange((res)=>{
				console.log(res);
			});
		},
		methods:{
			// 支付信息费
			payOffer(){
				uni.showModal({
					title:'确定运输该订单？',
					success: async(op) => {
						if(op.confirm){
							let res = await offerPay({
								id:this.transport.my_ship_offer.id,
							});
							console.log('支付信息',res);
							if(res){
								uni.requestPayment({
									provider:'wxpay',
									timeStamp:res.timeStamp,
									nonceStr:res.nonceStr,
									package:res.package,
									signType:res.signType,
									paySign:res.paySign,
									success: () => {
										uni.showToast({
											title:'支付成功',
											icon:"success"
										})
										this.getInfo();
									},
									fail:(err)=>{
										console.log(err);
										uni.showToast({
											title:'订单支付失败',
											icon:"none"
										})
									},
									complete: () => {
										
									}
								})
							}
						}
					}
				})
			},
			goOffer(line){
				if(uni.getStorageSync('uid')){
					uni.navigateTo({
						url:'/bench/offer?id='+this.transport.id+'&ton='+this.transport.ton,
					})
				}else{
					uni.showModal({
						title:'提示',
						content:'登录后可提交报价，是否现在登录？',
						success: (op) => {
							if(op.confirm){
								uni.login({
									success:async(info)=>{
										if(info.code){
											let res = await weiLogin({
												js_code:info.code,
											});
											if(res){
												uni.showToast({
													title:'登录成功',
													icon:'success'
												})
												uni.setStorageSync('uid',res.memberId);
												this.getList(1);
											}
										}
									},
									fail:(err)=>{
										console.log(err);
										uni.showToast({
											title:'登录凭证获取失败',
											icon:"none"
										})
									}
								})
							}
						}
					})
				}
				
			},
			confirm(line){
				uni.showModal({
					title:'确认货物送达且没有问题?',
					success: async(op) => {
						if(op.confirm){
							let res = await indexOperate({
								type:'2',
								id:this.transport.id,
							})
							if(res){
								uni.showToast({
									title:'信息已更新',
									icon:"success"
								})
								this.getInfo();
							}
						}
					}
				})
			},
			contact(){
				uni.makePhoneCall({
					phoneNumber:this.transport.tel,
				})
			},
			lookRecord(){
				uni.navigateTo({
					url:'./record?id='+this.transport.id
				})
			},
			republish(){
				uni.navigateTo({
					url:'./release?time=second&id='+this.transport.id
				})
			},
			cancelOrder(){
				var tips = this.identify == '1' ? "确定取消该货运信息？" : "确定取消该货运报价？"
				uni.showModal({
					title:tips,
					success: async(op) => {
						if(op.confirm){
							var res = null;
							if(this.identify == "1"){
								res = await indexOperate({
									type:'1',
									id:this.transport.id,
								});
							}else{
								res = await canseloffer({
									memberId:uni.getStorageSync('uid'),
									// memberId:'112',
									id:this.transport.id,
								});
							}
							if(res){
								uni.showToast({
									title:'信息已取消',
									icon:"success"
								})
								this.getInfo()
							}
						}
					}
				})
			},
			async getInfo(){
				let res = await shipInfo({
					id:this.transport.id,
					// memberId:this.identify == "2" ? "112" : uni.getStorageSync('uid'),
					memberId:uni.getStorageSync('uid'),
				});
				if(res){
					for(var i in this.transport){
						this.transport[i] = res[i];
					}
					if(this.identify == '1'){
						this.lat=this.transport.lat;
						this.lng=this.transport.lng;
					}
					if(this.identify == '2'){
						this.lat=this.transport.lat1;
						this.lng=this.transport.lng1;
					}
					console.log(this.position);
					if(this.transport.load_address1){
						this.markers.push({
							id: 1, //标记点id
							title: '发货地',
							latitude: this.transport.lat1, //维度
							longitude: this.transport.lng1, //经度
							alpha: 1,
							width:20,
							height:20,
							iconPath: '/static/images/startIcon.png',
						})
					}
					if(this.transport.unload_address1){
						this.markers.push({
							id: 2, //标记点id
							title: '目的地',
							latitude: this.transport.lat4, //维度
							longitude: this.transport.lng4, //经度
							alpha: 1,
							width:20,
							height:20,
							iconPath: '/static/images/endIcon.png',
						})
					}
					this.polyline.push({
						points:[{
							latitude: this.transport.lat1, //维度
							longitude: this.transport.lng1, //经度
						},{
							latitude: this.transport.lat4, //维度
							longitude: this.transport.lng4, //经度
						}],
						color:"#50bf0d",
						width:10,
						arrowLine:true,
						borderwidth:2,
					}) 
					
					if(this.identify == '1' && this.transport.status == '3'){
						
						this.markers.push({
							id: 3, //标记点id
							title: '司机位置',
							latitude: this.transport.lat, //维度
							longitude: this.transport.lng, //经度
							alpha: 1,
							width:40,
							height:40,
							iconPath: '/static/images/dirver.png',
						})
					}
					if(this.identify == '2' && this.transport.status == '4'){
						
						this.polyline.push({
							points:[{
								latitude: this.transport.lat, //维度
								longitude: this.transport.lng, //经度
							},{
								latitude: this.transport.lat1, //维度
								longitude: this.transport.lng1, //经度
							}],
							color:"#50bf0d",
							width:10,
							arrowLine:true,
							borderwidth:2,
						})
						console.log(this.polyline);
					}
				}
			},
		}
	}
</script>

<style lang="scss">
	.map{
		width:100%;
		height:calc(100vw - 24px);
		margin-bottom: 12px;
		border-radius:5px;
	}
	.tripDetail{
		.btns{
			.btn{
				width:100%;
				padding: 10px 0;
				border-radius: 4px;
				text-align: center;
				border:1px solid #f6f6f6;
			}
			.len1{
				width: 100%;
			}
			.len2{
				width:30%;
			}
			.sty1{
				color: white;
				background: #0087FC;
				border-color: #0087FC;
			}
			.sty2{
				background: white;
				border-color: rgba(0, 0, 0, 0.2);
				color: #999999;
			}
			width:100%;
			position: fixed;
			left:0;
			bottom: 0;
			padding: 12px;
			
			box-sizing: border-box;
		}
		.bj{
			.bjTit{
				font-size: 16px;
			}
			.info {
				.line1 {
					width: 100%;
					margin-bottom: 8px;
					color: #666666;
					.val {
						color: #222222;
					}
				}
				width: 100%;
				padding: 10px 0 0;
			}
			width: 100%;
			padding: 12px;
			box-sizing: border-box;
			background: white;
		}
		.huozhu{
			.tips{
				.tips_content{
					line-height: 20px;
				}
				.tit{
					margin-bottom:6px;
				}
				font-size: 12px;
				color: #666666;
			}
			.hzInfo{
				.info{
					.line{
						display: inline-block;
						margin:0 5px;
					}
					.time{
						font-size: 12px;
						color: #999999;
						margin-top: 3px;
					}
				}
				.hzTx{
					width:40px;
					height:40px;
					border-radius: 50%;
					margin-right: 12px;
				}
				width: 100%;
				margin-bottom: 12px;
			}
			width: 100%;
			margin: 12px auto;
			padding: 12px;
			box-sizing: border-box;
			background: white;
		}
		.orderOne {
			.info {
				.line1 {
					width: 100%;
					margin-bottom: 8px;
					color: #666666;
		
					.val {
						color: #222222;
					}
				}
		
				width: 100%;
				padding: 10px 0;
			}
		
			.config {
				.address {
					.addIcon {
						width: 14.8px;
						height: 14.8px;
						border-radius: 50%;
						color: white;
						text-align: center;
						line-height: 14.8px;
						font-size: 8px;
						margin-right: 8px;
					}
		
					.blue {
						background: #0087FC;
					}
		
					.orange {
						background: #ff4816;
					}
		
					width: 100%;
					color: #000033;
				}
		
				.qi {
					margin: 8px 0;
				}
		
				.time {
					font-size: 12px;
					color: #999999;
		
					.showTime {
						margin-left: 8px;
					}
				}
		
				width: 100%;
				padding: 10px 0;
				border-bottom: 1px solid #EEEEEE;
			}
		
			.product {
				.orange {
					background: linear-gradient(to right, #ff4816, #ffa15d);
				}
		
				.blue {
					background: #0087FC;
				}
		
				.carType {
					width: 52px;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					left: -12px;
					font-size: 10px;
					color: white;
					padding: 4px 0;
					border-top-right-radius: 50px;
					border-bottom-right-radius: 50px;
					text-align: center;
				}
		
				.orderStatus {
					width: 40px;
				}
		
				width:100%;
				border-bottom: 1px solid #EEEEEE;
				padding: 10px 0 10px 50px;
				box-sizing: border-box;
				position: relative;
				font-size: 18px;
				font-weight: bold;
			}
		
			width:100%;
			padding: 0 12px;
			box-sizing: border-box;
			border-radius: 5px;
			margin-bottom: 12px;
			background: white;
		}
		padding: 12px;
		box-sizing: border-box;
		padding-bottom: 70px;
	}
</style>
